<template>
  <div>
    <el-bread></el-bread>
    <el-button type="primary" round plain size="small" @click="toAlert"
      >添加</el-button
    >
    <!-- 组件通信 父传子 -->
    <!-- 编辑按钮 -->
    <!-- <v-dialog :isShow="isShow" @cancel="cancel"></v-dialog> -->
    <v-dialog :addInfo="addInfo" @cancel="cancel" ref="vAdd"></v-dialog>
    <!-- 表格列表的渲染 -->
    <v-List @edit="edit"></v-List>
  </div>
</template>

<script>
import vList from "./list";
import vDialog from "./addInfo";
export default {
  data() {
    return {
      // isShow: false,
      // 编辑按钮
      addInfo: {
        isShow: false, //控制弹框的显示 / 隐藏
        isAdd: true //用于控制添加或者编辑  true为添加 / false为编辑
      }
    };
  },
  components: {
    vList,
    vDialog
  },
  methods: {
    // 点击添加按钮，弹出弹框
    toAlert() {
      // this.isShow = true;
      // 编辑按钮
      // 打开弹框
      this.addInfo.isShow = true;
      // 告诉弹框你是添加
      this.addInfo.isAdd = true;
    },
    cancel(e) {
      // this.addInfo.isShow = e;
      // console.log(e,"子组件修改父组件的数据");
      this.addInfo.isShow = e;
    },
    // 封装一个编辑事件
    edit(e) {
      // console.log(e, "接收到的子组件的参数id");
      // console.log(this.$refs.vAdd, "子组件的实例");
      // 打开编辑弹框
      this.addInfo.isShow = true;
      // 告诉弹框你是编辑
      this.addInfo.isAdd = false;
      this.$refs.vAdd.lookUp(e);
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-button {
  margin-bottom: 20px;
}
</style>
